<template>
    <div>
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
            <p class="condition-title-p">
                培养方案审批 申请编号：
                <span> {{ detailApprovalData.no }}</span>
            </p>
            <el-row>
                <div style="padding:0 20px;">
                    <p class="base-info-title">修改详情</p>
                    <table class="table-style-baseinfo" >
                        <tr>
                            <td class="text-right-background-color">方案名称:</td>
                            <td class="text-left-background-none">
                                <a @click="preview(detailApprovalData.contentInfo.cultureId)">{{detailApprovalData.contentInfo.name}}</a>
                            </td>
                            <td class="text-right-background-color">年级:</td>
                            <td class="text-left-background-none">{{detailApprovalData.contentInfo.grade}}</td>
                        </tr>
                        <tr>
                            <td class="text-right-background-color">学院:</td>
                            <td class="text-left-background-none">{{detailApprovalData.contentInfo.faculty}}</td>
                            <td class="text-right-background-color">专业:</td>
                            <td class="text-left-background-none">{{detailApprovalData.contentInfo.major}}</td>
                        </tr>
                        <tr>
                            <td class="text-right-background-color">培养层次:</td>
                            <td class="text-left-background-none"  colspan="3">{{detailApprovalData.contentInfo.trainingLevel}}</td>
                                
                        </tr>
                      
                    </table>
                </div>
            </el-row>
            <el-row>
                <div style="padding: 20px;">
                    <div style="padding:0 10px;">
                        <!-- <el-row :gutter="20" class="edu-info-list">
                            <el-col>
                                <div class="item-group" style="width: 100%">
                                    <label class="secondary-text label">审批材料：</label>
                                    <div class="display-inline-block" style="width: 50%;padding-top:6px;">
                                        <p v-for="item in detailApprovalData.contentInfo.fileList">
                                            <a @click="download(item.path)">{{item.label}}</a>
                                        </p>
                                    </div>
                                </div>
                            </el-col>
                        </el-row> -->
                        <el-row :gutter="20" class="edu-info-list">
                            <el-col>
                                <div class="item-group" style="width: 100%">
                                    <label class="secondary-text label">修改说明：</label>
                                    <div class="display-inline-block" style="width: 50%">
                                        <span
                                            class="majoy-text span"
                                        >
                                            {{detailApprovalData.wfTypeName}}
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="edu-info-list">
                            <el-col>
                                <div class="item-group" style="width: 100%">
                                    <label class="secondary-text label">审批说明：</label>
                                    <div class="display-inline-block" style="width: 50%">
                                        <span class="majoy-text" style="width: 100%">
                                            <el-input
                                                :rows="3"
                                                v-model="approvalInfo.content"
                                                :disabled="dataInfo.result !== 'Process'"
                                                type="textarea"
                                                placeholder="请输入"
                                                style="width: 100%;min-height: 80px;"
                                                maxlength="50"
                                            />
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="edu-info-list">
                            <el-col>
                                <div class="item-group" style="width: 100%">
                                    <label class="secondary-text label">证明材料：</label>
                                    <div class="display-inline-block">
                                        <el-upload
                                            :headers="{'X-Token': $store.state.session.sessionid}"
                                            :data="{bucketname: 'face', folderpath: 'file'}"
                                            :on-preview="handleAvatarPreview"
                                            :on-remove="handleAvatarRemove"
                                            :on-success="handleAvatarSuccess"
                                            class="upload-demo"
                                            action="/api/commonservice/obsfile/uploadfile"
                                            multiple
                                        >
                                            <el-button
                                                size="small"
                                                type="primary"
                                                :disabled="dataInfo.result !== 'Process'"
                                            >{{$t('select_attachment')}}</el-button>
                                            <span class="el-upload__tip">
                                                <i
                                                    style="font-size:16px;color: rgba(26, 104, 223, 0.207843);"
                                                    class="el-icon-warning"
                                                ></i>
                                                {{$t('attachment_upload_tip')}}
                                            </span>
                                        </el-upload>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="edu-opertion-bar">
                            <div class="float-right">
                                <el-button type="default" :disabled="dataInfo.result !== 'Process'" @click="approvalReject">驳回</el-button>
                                <!-- <el-button type="primary" :disabled="dataInfo.result !== 'Process'" @click="approvalThrough">提交</el-button> -->
                                 <el-button type="primary" :disabled="dataInfo.result !== 'Process'" @click="approvalThrough">同意</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-row>
            <div style="padding:0 20px;">
                    <!-- 审批进度 -->
                    <h1 class="base-info-title">{{$t('approval_progress')}}</h1>
                    <el-table
                        stripe
                        :data="detailApprovalData.listApproveHistory"
                        size="mini"
                    >
                        <!-- <el-table-column
                            v-for="item in approvalColumn"
                            :key="item.id"
                            :prop="item.id"
                            :label="item.title"
                            show-overflow-tooltip
                        ></el-table-column> -->
                        <el-table-column :label="$t('index_title')" type="index" width="50"></el-table-column>
                        <el-table-column :label="$t('applicant_time')"  width="150" show-overflow-tooltip>
                            <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                        </el-table-column>
                        <!-- <el-table-column :label="$t('approver_label')" prop="approvorName" width="130" show-overflow-tooltip></el-table-column> -->
                        <el-table-column :label="$t('approver_label')" width="150" show-overflow-tooltip>
                            <template slot-scope="props">
                                {{props.row.approvorName}}({{props.row.approvorId}})
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('department_label')" prop="faculty" width="130" show-overflow-tooltip></el-table-column>                    
                        <el-table-column :label="$t('approval_result')" width="100">
                            <template slot-scope="props">
                                <el-tag
                                    type="success"
                                    size="mini"
                                    v-if="props.row.result == 'End'"
                                >{{$t('message.pass')}}</el-tag>
                                <el-tag
                                    type="danger"
                                    size="mini"
                                    v-if="props.row.result == 'Reject'"
                                >{{$t('message.reject')}}</el-tag>
                                <!-- <el-tag
                                    type="info"
                                    size="mini"
                                    v-if="props.row.result == 'Process'"
                                >{{$t('message.submit')}}</el-tag> -->
                                <el-tag
                                    type="success"
                                    size="mini"
                                    v-if="props.row.result == 'Process'"
                                >{{$t('message.pass')}}</el-tag>
                                <el-tag
                                    type="info"
                                    size="mini"
                                    v-if="props.row.result == 'COMMIT'"
                                >{{$t('message.submit')}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="content"
                            label="审批说明"
                            width="150"
                        />
                        <el-table-column
                            prop="fileInfo"
                            label="审批材料"
                            width="250"
                            >
                            <template slot-scope="scope">
                                <div v-if="scope.row.fileInfo">
                                <el-button
                                    v-for="item in scope.row.fileInfo.approveAttachment"
                                    :key="item"
                                    type="text"
                                    @click="handleGetFile(item)"
                                    style="display:block;margin-left:10px"
                                >{{ item }}</el-button>
                                <!-- <span>{{scope.row.fileInfo}}</span> -->
                                </div>
                            </template>
                        </el-table-column>
                        <div slot="empty">
                            <div class="empty_img_container">
                                <img src="/static/images/faceIdentify/u26.png" alt />
                            </div>
                        </div>
                    </el-table>
                </div>
        </el-card>
    </div>
</template>
<script>
import approvalApi from "common/src/api/ugdCultureScheme/schemeApproval";
import{findCultureSchemeById}from "common/src/api/culture/bachelor"
import {downloadfile} from "common/src/api/upload";
import {findUserInfoByIdType} from "common/src/api/user";
import filters from "common/src/filters";
export default {
    name: "approvalDetail",
    props: ["dataInfo", "isFromPulic"],
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    data() {
        return {
            approvalInfo: {
                uid: "",
                no: "",
                content: "",
                approveAttachment: [],
                remark: null
            },
            approvalList: [],
            approvalColumn: [
                {
                    id: 'index',
                    title: this.$t('index_title')
                },
                {
                    id: 'time',
                    title: this.$t('approval_time')
                },
                {
                    id: 'approvorName',
                    title: this.$t('approver_label')
                },
                {
                    id: 'department',
                    title: this.$t('department_label')
                },
            ],
            detailApprovalData: {
                contentInfo: {}
            },
            userDetailInfo: {}
        };
    },
    methods: {
        init () {
            this.getApprovalInfoDetail();
            //this.getUserInfoDetail();
        },
        download (path) {
            downloadfile(path);
        },
        getApprovalInfoDetail () {
            approvalApi.
                selectApproFlow({
                    no: this.dataInfo.no
                })
                .then(
                    response => {
                        if (response.code === 200) {
                            response.data.contentInfo = JSON.parse(response.data.content);
                            
                            response.data.listApproveHistory.forEach((row, index) => {
                                if(row.fileInfo){
                                    row.fileInfo = JSON.parse(row.fileInfo)
                                }
                            });
                            if(this.dataInfo.result !== 'Process' && !this.isFromPulic){
                                this.approvalInfo.content = response.data.listApproveHistory[response.data.listApproveHistory.length - 1].content
                            }
                            if(response.data.contentInfo){
                                findCultureSchemeById({ id: response.data.contentInfo.cultureId }).then(res => {
                                    if (res && res.code === 200) {
                                        response.data.contentInfo.major = res.data.campusProfessionName;
                                    }
                                });
                            }
                            console.log(response.data.listApproveHistory)
                            if(response.data.listApproveHistory.length > 0){
                                console.log(response.data.contentInfo.evidenceList)
                                response.data.listApproveHistory[0].fileInfo = {
                                    approveAttachment:response.data.contentInfo.evidenceList
                                }
                            }
                            this.detailApprovalData = response.data;
                        }
                    },
                    error => {
                        // 数据保存为上一次请求的数据。
                    }
                )
                .catch(error => {
                    // 数据保存为上一次请求的数据。
                });
        },
        getUserInfoDetail () {
            let queryParams =  "userId=" + this.dataInfo.applicantId + "&type=" + this.dataInfo.userType;
            findUserInfoByIdType(queryParams)
                .then(
                    response => {
                        if (response.code === 200) {
                            this.userDetailInfo = response.data;
                        }
                    },
                    error => {
                        // 数据保存为上一次请求的数据。
                    }
                )
                .catch(error => {
                    // 数据保存为上一次请求的数据。
                });
        },
        showCulturePlan (row) {
            this.$router.push({
                path: "/traningPlanMy",
                query: {
                    studentID: row.applicantId,
                }
            });
        },
        // approvalReject () {
        //     approvalApi.
        //         approvalReject({
        //             no: this.dataInfo.no,
        //             content: this.approvalInfo.content,
        //             oaNo: this.dataInfo.wfType,
        //             approveAttachment: this.approvalInfo.approveAttachment,
        //             remark: ''
        //         })
        //         .then(
        //             response => {
        //                 if (response.code === 200) {
        //                     //获取抓取列表
        //                     this.$message({
        //                         type: "success",
        //                         message: '审批成功'
        //                     });
        //                     this.$parent.showRollDetail();
        //                 } else {
        //                     this.$message({
        //                         type: "error",
        //                         message: response.msg
        //                     });
        //                 }
        //             },
        //             error => {
        //                 // 数据保存为上一次请求的数据。
        //             }
        //         )
        //         .catch(error => {
        //             // 数据保存为上一次请求的数据。
        //         });
        // },
        approvalReject () {
            approvalApi.
                approvalReject({
                    no: this.dataInfo.no,
                    content: this.approvalInfo.content,
                    oaNo: this.dataInfo.wfType,
                    approveAttachment: this.approvalInfo.approveAttachment,
                    remark: ''
                })
                .then(
                    response => {
                        if (response.code === 200) {
                            //获取抓取列表
                            this.$message({
                                type: "success",
                                message: '审批成功'
                            });
                            this.$parent.showRollDetail();
                        } else {
                            this.$message({
                                type: "error",
                                message: response.msg
                            });
                        }
                    },
                    error => {
                        // 数据保存为上一次请求的数据。
                    }
                )
                .catch(error => {
                    // 数据保存为上一次请求的数据。
                });
        },
        // approvalThrough () {
        //     approvalApi.
        //         approvalThrough({
        //             no: this.dataInfo.no,
        //             content: this.approvalInfo.content,
        //             oaNo: this.dataInfo.wfType,
        //             approveAttachment: this.approvalInfo.approveAttachment,
        //             remark: ''
        //         })
        //         .then(
        //             response => {
        //                 if (response.code === 200) {
        //                     //获取抓取列表
        //                     this.$message({
        //                         type: "success",
        //                         message: '审批成功'
        //                     });
        //                     this.$parent.showRollDetail();
        //                 } else {
        //                     this.$message({
        //                         type: "error",
        //                         message: response.msg
        //                     });
        //                 }
        //             },
        //             error => {
        //                 // 数据保存为上一次请求的数据。
        //             }
        //         )
        //         .catch(error => {
        //             // 数据保存为上一次请求的数据。
        //         });
        // },
        handleGetFile(objectkey) {
            if (!objectkey) return;
            downloadfile(objectkey);
        },
        approvalThrough () {
            // if(this.approvalInfo.approveAttachment.length == 0){
            //     this.$message({
            //         type: "warning",
            //         message: '请上传证明材料'
            //     });
            //     return;
            // }
            approvalApi.
                approvalThrough({
                    no: this.dataInfo.no,
                    content: this.approvalInfo.content,
                    oaNo: this.dataInfo.wfType,
                    approveAttachment: this.approvalInfo.approveAttachment,
                    remark: ''
                })
                .then(
                    response => {
                        if (response.code === 200) {
                            //获取抓取列表
                            this.$message({
                                type: "success",
                                message: '审批成功'
                            });
                            this.$parent.showRollDetail();
                        } else {
                            this.$message({
                                type: "error",
                                message: response.msg
                            });
                        }
                    },
                    error => {
                        // 数据保存为上一次请求的数据。
                    }
                )
                .catch(error => {
                    // 数据保存为上一次请求的数据。
                });
        },
        handleChangeFileMethod (file, fileList) {
            fileList.forEach()
        },
        handleAvatarRemove (file, fileList) {
            this.getUploadFile(fileList)
        },
        handleAvatarSuccess (response, file, fileList) {
            this.getUploadFile(fileList)
        },
        getUploadFile (fileList) {
            this.approvalInfo.approveAttachment = [];
            fileList.forEach(item => {
                if(item.response.code === 200) {
                    this.approvalInfo.approveAttachment.push(item.response.data[item.name].objectkey);
                }
            })
        },
        preview (schemeID){
            this.$router.push({
                path: "/bclCultureTemplateView",
                query: {
                    projId: '1',
                    id: schemeID,
                    dataType: 2
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
<style  rel="stylesheet/scss" lang="scss" scoped>
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
}
.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-left-background-none {
    text-align: left;
}
</style>
